<!DOCTYPE html>
<html>
  <head>
    <title>
      HanapIn
    </title>
    <link rel="stylesheet" href="src/css/normalize.css">
    <!--
      <link rel="shortcut icon" href="src/img/favicon.png">
      <link rel="stylesheet" href="src/styles/main.css">
    -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
      body {
        background-color: #dedede;
        overflow-y: hidden;
      }
      
      .hi-header {
        background-color: #c00000;
        background-image: url("src/img/header-logo.png");
        background-repeat: no-repeat;
        width: 100%;
        height: 40px;
        z-index: 3000;
        position: fixed;
        top: 0;
      }
      
      .hi-header button {
        width: 40px;
        height: 40px;
        border: 0;
        background-color: #c00000;
        transition: background-color .1s linear;
        float: right;
        border-left: 1px solid #f00000;
      }
      
      .hi-header button:hover {
        background-color: #a00000;
        transition: background-color .1s linear;
      }
      
      .hi-nav {
        background-color: #fafafa;
        width: 100%;
        height: 80px;
        z-index: 3000;
        position: fixed;
        top: 40px;
      }
      
      .hi-nav button {
        width: 80px;
        height: 80px;
        color: #c00000;
        font-family: century gothic;
        font-size: 6pt;
        text-transform: uppercase;
        line-height: 140px;
      }
      
      .hi-nav .left {
        float: left;
        font-size: 0;
      }
      
      .hi-nav .right {
        float: right;
        font-size: 0;
      }
      
      .hi-nav .left button {
        border: 0;
        background-color: #fafafa;
        transition: background-color .1s linear;
        border-right: 1px solid rgba(192, 0, 0, 0.25);
      }
      
      .hi-nav .left button:hover {
        background-color: #eaeaea;
        transition: background-color .1s linear;
      }
      
      .hi-nav .right button {
        border: 0;
        background-color: #fafafa;
        transition: background-color .1s linear;
        border-left: 1px solid rgba(192, 0, 0, 0.25);
      }
      
      .hi-nav .right button:hover {
        background-color: #eaeaea;
        transition: background-color .1s linear;
      }
      
      .hi-footer {
        z-index: 4000;
        background-color: #c00000;
        height: 20px;
        width: 100%;
        position: fixed;
        bottom: 0px;
        left: 0px;
        color: #fff;
        font-size: 10pt;
      }
      
      .hi-wrapper {
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
      }
      
      .hi-canvas {
        width: 5000px;
        height: 5000px;
        position: relative;
        top: 0px;
        left: 0px;
      }
      
      .hi-grid {
        background-image: url('src/img/grid.png');
        background-color: rgba(0, 0, 0, 0);
        width: 2000px;
        height: 1000px;
        position: absolute;
        z-index: 50;
      }
      
      .hi-map {
        background-image: url('src/img/mapa-yata.png');
        background-repeat: no-repeat;
        width: 2000px;
        height: 1000px;
        position: absolute;
        z-index: 25;
      }
      
      .hi-toggles {
        float: right;
        font-size: 0pt;
      }
      
      .hi-toggles button {
        width: 30px;
        height: 20px;
        border: 0;
        background-color: #a00000;
        transition: background-color .1s linear;
      }
      
      .hi-toggles button:hover {
        background-color: #a00000;
        transition: background-color .1s linear;
      }
    </style>
  </head>
  
  <body>
    <div class="hi-header">
      <button style="background-image: url('src/img/header-exit.png');"></button>
      <button style="background-image: url('src/img/header-question.png');"></button>
      <button style="background-image: url('src/img/header-info.png');"></button>
      
    </div>
    
    <div class="hi-nav">
      <div class="left">
        <button onclick="openSections();" style="background-image: url('src/img/nav-section.png');">Book Sections</button>
        <button onclick="openAccessPoints();" style="background-image: url('src/img/nav-wifi.png');">WiFi Routers</button>
        <button onclick="openPOI();" style="background-image: url('src/img/nav-poi.png');">POI</button>
        <button onclick="openNotifications();" style="background-image: url('src/img/nav-noti.png');">Notifications</button>
      </div>
      
      <div class="right">
        <button onclick="openServer();" style="background-image: url('src/img/nav-server.png');">Server</button>
        <button onclick="openPreferences();" style="background-image: url('src/img/nav-config.png');">Preferences</button>
      </div>
    </div>
    
    <div class="hi-footer">
      <!--
      x: <span id="xcoor"></span>, y: <span id="ycoor"></span>
      chuchux: <span id="startex"></span>, chuchuy: <span id="startey"></span>
      -->
      
      <div class="hi-toggles">
        <button onclick="displaySections(this);" style="background-image: url('src/img/footer-section.png');"></button>
        <button onclick="displayAccessPoints(this);" style="background-image: url('src/img/footer-wifi.png');"></button>
        <button onclick="displayPOI(this);" style="background-image: url('src/img/footer-poi.png');"></button>
        <button onclick="displayNotifications(this);" style="background-image: url('src/img/footer-noti.png');"></button>
      </div>
    </div>
    
    <div class="hi-modal-wrapper">

    </div>
    
    <div class="hi-options">

    </div>
    
    <div class="hi-wrapper">
      <div class="hi-canvas">
        <div class="hi-tags-container">
          <?php
            error_reporting(0);

            $host="localhost";
            $username="root";
            $password="";
            $database="hanapin";

            $connection = mysql_connect("$host", "$username", "$password"); 
            mysql_select_db("$database")or die(mysql_error());

            $fetch_tags = mysql_query("SELECT * FROM section");
            while($throw_tags = mysql_fetch_array($fetch_tags)) {
              echo "<div id='section:" . $throw_tags[0] . "' style='left:" . $throw_tags[3] . "px; top:" . $throw_tags[4] . "px;' class='hi-tag tag-section'></div>";
            }
            
            $fetch_tags = mysql_query("SELECT * FROM poi");
            while($throw_tags = mysql_fetch_array($fetch_tags)) {
              echo "<div id='poi:" . $throw_tags[0] . "' style='left:" . $throw_tags[2] . "px; top:" . $throw_tags[3] . "px;' class='hi-tag tag-poi'></div>";
            }
            
            $fetch_tags = mysql_query("SELECT * FROM accesspoint");
            while($throw_tags = mysql_fetch_array($fetch_tags)) {
              echo "<div id='wifi:" . $throw_tags[0] . "' style='left:" . $throw_tags[3] . "px; top:" . $throw_tags[4] . "px;' class='hi-tag tag-wifi'></div>";
            }
          ?>
        </div>
        
        <div class="hi-grid">
        
        </div>
        
        <div class="hi-map">
          
        </div>
      </div>
    </div>
  </body>

  <script>
    //var xcoor = document.getElementById("xcoor");
    //var ycoor = document.getElementById("ycoor");
    //var chuchux = document.getElementById("startex");
    //var chuchuy = document.getElementById("startey");
    
    /* MAPA CONTAINERS */
    var wrapper = document.getElementsByClassName("hi-wrapper")[0];
    var canvas = document.getElementsByClassName("hi-canvas")[0];
    var grid = document.getElementsByClassName("hi-grid")[0];

    /* Gagawin pang on-resize iyong window chuchu */
    wrapper.style.height = window.innerHeight + "px";
    
    /* Ginagamit kapag nag-i-insert sa database */
    var xCoor;
    var yCoor;
    
    /* Disable the context menu a.k.a right-click everywhere */
    window.addEventListener('contextmenu', function(e) {
      e.preventDefault();
      return false;
    }, false);

    /* OPTIONS CONTAINER */
    var options = document.getElementsByClassName("hi-options")[0];
    
    var tags = []; // Wala lang yata ito
    
    /* Variables para sa pag-move ng mapa chuchu */
    var mouse = {x: 0, y: 0};
    var startCoords = {x: 0, y: 0};
    var last = {x: 0, y: 0};
    var isDown = false;
    
    /* Para sa trigger-area yata */
    var isDrawing = false;
    
    /* Provide a custom context menu to map */
    grid.addEventListener('contextmenu', function(e) {
      e.preventDefault();
      mouse = {x: e.pageX, y: e.pageY};
      var x = e.pageX - this.offsetLeft - last.x;
      var y = e.pageY - this.offsetTop - last.y;
      if (x <= 2000 && x >= 0 && y <= 1000 & y >= 0) {
        options.style.left = mouse.x + "px";
        options.style.top = mouse.y + "px";
        
        loadXMLDoc("context-add.php", function() {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            options.innerHTML = xmlhttp.responseText;
          }
        });
        
      }
      return false;
    }, false);
    
    /* Galaw-galaw the mapa */
    wrapper.onmousemove = function (e) {
      'use strict';
      var xVal = e.pageX - this.offsetLeft,
          yVal = e.pageY - this.offsetTop;
      mouse = {x: e.pageX, y: e.pageY};
      
      xCoor = e.pageX - this.offsetLeft - last.x;
      yCoor = e.pageY - this.offsetTop - last.y;
      
      if (isDown) {
        canvas.style.top = yVal - startCoords.y + "px";
        canvas.style.left = xVal - startCoords.x + "px";
        //chuchux.innerHTML = canvas.style.left;
        //chuchuy.innerHTML = canvas.style.top;
      }
    };

    /* Kapag pumindot */
    wrapper.onmousedown = function (e) {
      'use strict';
      options.style.left = "-5000px";
      options.style.top = "-5000px";
      e = e || window.event;
      var button;
      if (e.which == null) {
        button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
      } else {
        button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
      }
      if (button == "left") {
        isDown = true;
        canvas.style.cursor = "grab";
        startCoords = {x: e.pageX - this.offsetLeft - last.x, y: e.pageY - this.offsetTop - last.y};
      }
    };

    /* Kapag pinakawalan */
    wrapper.onmouseup = function (e) {
      'use strict';
      e = e || window.event;
      isDown = false;
      canvas.style.cursor = "default";
      var button;
      if (e.which == null) {
        button = (e.button < 2) ? 'left' : ((e.button == 4) ? 'middle' : 'right');
      } else {
        button = (e.which < 2) ? 'left' : ((e.which == 2) ? 'middle' : 'right');
      }
      if (button == "left") {
        last = {x: e.pageX - this.offsetLeft - startCoords.x,
                y: e.pageY - this.offsetTop - startCoords.y};
      }
    };

    /* TAG CONTAINERS */
    var tagscontainer = document.getElementsByClassName("hi-tags-container")[0];
    var sections = document.getElementsByClassName("tag-section");
    var poi = document.getElementsByClassName("tag-poi");
    var routers = document.getElementsByClassName("tag-wifi");
    
    var clickedTag; // Ano iyong tag na na-click (either left or right)
    
    /* Iyong individual na context menu ng tags */
    setTagContextMenu(sections);
    setTagContextMenu(poi);
    setTagContextMenu(routers);
    
    /* See taas */
    function setTagContextMenu(tags) {
      for (var a = 0; a < tags.length; a++) {
        tags[a].addEventListener('contextmenu', function(e) {
          e.preventDefault();
          clickedTag = this.id.split(":"); // Nasa id kasi kung anong type ng tag at iyong primary key sa database
          mouse = {x: e.pageX, y: e.pageY};
          options.style.left = mouse.x + "px";
          options.style.top = mouse.y + "px";
          
          loadXMLDoc("context-existing.php", function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              options.innerHTML = xmlhttp.responseText;
            }
          });
          return false;
        }, false);
      }
    };
    
    /* Iyong mga individual na onclick */
    setTagOnclick(sections);
    
    function setTagOnclick(tags) {
      for (var a = 0; a < tags.length; a++) {
        tags[a].addEventListener('click', function(e) {
          clickedTag = this.id.split(":"); // Nasa id kasi kung anong type ng tag at iyong primary key sa database
          showModalWrapper("view-" + clickedTag[0] + ".php?sectionid=" + clickedTag[1]);
        }, false);
      }
    }
    
    /* Mini-function kapag itatago na iyong context menu */
    function hideOptions() {      
      options.style.left = "-5000px";
      options.style.top = "-5000px";
    }
    
    /* Para sa pag-place sa mapa ng tags */
    var saan;
    function setCoordinates() {
      saan = {x: mouse.x - wrapper.offsetLeft - last.x, y: mouse.y - wrapper.offsetTop - last.y};
    };
    
    function placeTag(type) {
      tagscontainer.innerHTML += "<div style='left:" + saan.x +"px; top:" + saan.y + "px;' class='hi-tag tag-" + type + "'></div>";
      tags = document.getElementsByClassName("hi-tag");
      sections = document.getElementsByClassName("tag-section");
      poi = document.getElementsByClassName("tag-poi");
      routers = document.getElementsByClassName("tag-wifi");
    };
    
    /* EDITING OF BOOK SECTIONS */
    function editTag() {
      alert(clickedTag[0]);
    }
    
    /* ADDING OF BOOK SECTIONS */
    function addSection() {
      hideOptions();
      setCoordinates();
      showModalWrapper("add-section.php");
    };
    
    function insertSection() {
      var something = "insert-section.php?";
      something += "sectionname=" + document.getElementsByName("sectionname")[0].value + "&";
      something += "description=" + document.getElementsByName("sectiondescription")[0].value + "&";
      something += "ycoor=" + yCoor + "&";
      something += "xcoor=" + xCoor;
      
      loadXMLDoc(something, function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          if(xmlhttp.responseText) {
            placeTag("section");
            hideModalWrapper();
          }
        }
      });
    };
    
    /* ADDING OF POINTS OF INTEREST */
    function addPOI() {
      hideOptions();
      setCoordinates();
      showModalWrapper("add-poi.php");
    };
    
    function insertPOI() {
      var something = "insert-poi.php?";
      something += "poiname=" + document.getElementsByName("poiname")[0].value + "&";
      something += "description=" + document.getElementsByName("poidescription")[0].value + "&";
      something += "ycoor=" + yCoor + "&";
      something += "xcoor=" + xCoor;
      
      loadXMLDoc(something, function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          if(xmlhttp.responseText) {
            placeTag("poi");
            hideModalWrapper();
          }
        }
      });
    };
    
    /* ADDING OF ACCESS POINTS OR ROUTERS */
    function addWiFi() {
      hideOptions();
      setCoordinates();
      showModalWrapper("add-wifi.php");
    };
    
    function insertWiFi() {
      var something = "insert-wifi.php?";
      something += "ssid=" + document.getElementsByName("ssid")[0].value + "&";
      something += "macaddress=" + document.getElementsByName("macaddress")[0].value + "&";
      something += "ycoor=" + yCoor + "&";
      something += "xcoor=" + xCoor;
      
      loadXMLDoc(something, function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          if(xmlhttp.responseText) {
            placeTag("wifi");
            hideModalWrapper();
          }
        }
      });
    }
    
    /* ADDING OF PUSH NOTIFICATIONS */
    function drawTriggerArea() {
      
    };
    
    /* XMLHTTP SHIT */
    var xmlhttp;
    function loadXMLDoc(url, cfunc) {
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange = cfunc;
      xmlhttp.open("GET", url, true);
      xmlhttp.send();
    };
    
    
    /* Iyong mga pop-out */
    var modalwrapper = document.getElementsByClassName("hi-modal-wrapper")[0];
    // var listmodal = document.getElementsByClassName("hi-list")[0];
    // var addmodal = document.getElementsByClassName("hi-add")[0];
    function showModalWrapper(type) {
      modalwrapper.style.top = "0px";
      modalwrapper.style.left = "0px";
      loadXMLDoc(type, function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          modalwrapper.innerHTML = xmlhttp.responseText;
        }
      });
    }
    
    function openSections() {
      showModalWrapper();
    }
    
    function openAccessPoints() {
      showModalWrapper();
    }
    
    function openPOI() {
      showModalWrapper();
    }
    
    function openNotifications() {
      showModalWrapper();
    }
    
    function openServer() {
      showModalWrapper();
    }
    
    function openPreferences() {
      showModalWrapper();
    }
    
    function hideModalWrapper() {
      modalwrapper.style.top = "-5000px";
      modalwrapper.style.left = "-5000px";
      modalwrapper.innerHTML = "";
    }
    
    /* Iyong mga toggle-toggle kung visible or not iyong mga tags */
    var areSectionsShown = true;
    var areAccessPointsShown = true;
    var arePOIShown = true;
    var areNotificationsShown = true;
    
    function displaySections(button) {
      if (areSectionsShown) {
        button.style.backgroundColor = "#c00000";
        areSectionsShown = false;
        for (var i = 0; i < sections.length; i++) {
          sections[i].style.display = "none";
        }
      } else {
        button.style.backgroundColor = "#a00000";
        areSectionsShown = true;
        for (var i = 0; i < sections.length; i++) {
          sections[i].style.display = "inline";
        }
      }
    };
    
    function displayAccessPoints(button) {
      if (areAccessPointsShown) {
        button.style.backgroundColor = "#c00000";
        areAccessPointsShown = false;
        for (var i = 0; i < routers.length; i++) {
          routers[i].style.display = "none";
        }
      } else {
        button.style.backgroundColor = "#a00000";
        areAccessPointsShown = true;
        for (var i = 0; i < routers.length; i++) {
          routers[i].style.display = "inline";
        }
      }
    };
    
    function displayPOI(button) {
      if (arePOIShown) {
        button.style.backgroundColor = "#c00000";
        arePOIShown = false;
        for (var i = 0; i < poi.length; i++) {
          poi[i].style.display = "none";
        }
      } else {
        button.style.backgroundColor = "#a00000";
        arePOIShown = true;
        for (var i = 0; i < poi.length; i++) {
          poi[i].style.display = "inline";
        }
      }
    };
    
    function displayNotifications(button) {
      if (areNotificationsShown) {
        button.style.backgroundColor = "#c00000";
        areNotificationsShown = false;
      } else {
        button.style.backgroundColor = "#a00000";
        areNotificationsShown = true;
      }
    };
  </script>
  
  <style>
    .hi-tags-container {
      z-index: 2000;
      left: 0;
      top: 0;
      position: absolute;
    }
    
    .hi-tag {
      width: 20px;
      height: 20px;
      position: absolute;
      cursor: pointer;
      background-posiiton: center center;
    }
    
    .tag-section {
      background-image: url('src/img/tag-section.png');
    }
    
    .tag-poi {
      background-image: url('src/img/tag-poi.png');
    }
    
    .tag-wifi {
      background-image: url('src/img/tag-wifi.png');
    }
  
    .hi-modal-wrapper {
      z-index: 10000;
      background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100%;
      position: absolute;
      top: -5000px;
      left: -5000px;
    }
  
    .hi-options {
      background-color: #fafafa;
      width: 150px;
      font-size: 10pt;
      font-family: century gothic;
      border: 1px solid rgba(192, 0, 0, 0.25);
      position: absolute;
      left: -5000px;
      top: -5000px;
      z-index: 5000;
    }
    
    .hi-options button {
      border: 0;
      background-color: #fafafa;
      width: 100%;
      cursor: pointer;
      text-align: left;
      padding-bottom: 5px;
    }
    
    .hi-options button div {
      width: 25px;
      height: 20px;
      border-right: 1px solid rgba(0, 0, 0, 0.25);
      margin-left: -6px;
      margin-top: 5px;
      float: left;
    }
    
    .hi-options button span {
      position: relative;
      top: 5px;
      left: 7px;
    }
    
    .hi-options .btn-bottom {
      border-bottom: 1px solid rgba(192, 0, 0, 0.25);
    }
    
    .hi-options button:hover {
      background-color: #c00000;
    }
  </style>
 </html>